<template>
	<!-- 面包屑 -->
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
		<el-breadcrumb-item>积分管理</el-breadcrumb-item>
	</el-breadcrumb>
	<!-- 查询表单 -->
	<div class="serchForm">
		<el-form :inline="true" :model="queryForm" class="demo-form-inline">
			<el-form-item label="用户名">
				<el-input v-model="queryForm.username" placeholder="请输入用户名" clearable @clear="query"/>
			</el-form-item>


<!--			<el-form-item label="昵称" style="margin-left: -20px;">
				<el-input v-model="queryForm.sysUser.username" placeholder="请输入昵称" clearable @clear="query"/>
			</el-form-item>-->


			<el-form-item>
				<el-button type="primary" @click="query">搜索</el-button>
			</el-form-item>

<!--			<el-form-item>
				<el-button type="danger" @click="deleteBatch" style="margin-left: -20px;">批量删除</el-button>
			</el-form-item>-->
		</el-form>
	</div>

	<!-- 表格 -->
	<div>
		<!-- 表格组件 -->
		<el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="ID" width="150" />
			<el-table-column prop="userId" label="用户ID" />
<!--			<el-table-column prop="sysUser.username" label="用户昵称" />-->
			<el-table-column prop="sysUser.username" label="用户名称" />
			<el-table-column prop="userPoints" label="积分" />

			<el-table-column fixed="right" label="状态" min-width="120">
				<template #default='scope'>
					<el-button type="success" size="small" @click="deleteInfo(scope.row.id)">正常</el-button>
				</template>
			</el-table-column>


		</el-table>
		<!-- 分页组件 -->

		<el-pagination v-model:current-page="queryForm.pageNum" v-model:page-size="queryForm.pageSize"
			:page-sizes="[5, 10, 15, 20]" size="default" layout="total, sizes, prev, pager, next, jumper" :total="total"
			@size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>

</template>

<script setup>
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	import {
		getCurrentInstance,
		onMounted,
		ref
	} from 'vue';
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;


	//查询表单数据
	const queryForm = ref({
		id: '',
		username: '',
		pageNum: 1,
		pageSize: 5
	});


	const dialogFormVisible = ref(false);
	//表格数据绑定
	const tableData = ref([]);
	//总记录数
	const total = ref(0);
	//批量删除的id号
	const ids = ref([])

	//查询方法
	const query = () => {
		axios.get(`points/page?id=${queryForm.value.id}&
		username=${queryForm.value.username}&
		pageNum=${queryForm.value.pageNum}&pageSize=${queryForm.value.pageSize}`).then((resp) => {
			tableData.value = resp.data.list;
			total.value = resp.data.pageTotal;
			console.log(resp);
		})
	}

	//删除操作
	const deleteInfo = (id) => {
		ElMessageBox.confirm(
				'确定要删除这条信息吗？',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				axios.delete(`/integral/${id}`).then((res) => {
					if (res.code == 200) {
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
					}
				}).finally(() => {
					query();
				})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})

	}
	//复选框选中数据
	const handleSelectionChange = (val) => {
		ids.value = val.map((item) => {
			return item.id;
		})
		console.log(ids.value);
		console.log(val);
	}
	//批量删除
	const deleteBatch = () => {
		ElMessageBox.confirm(
				'确定要删除这些信息吗？',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				axios.delete(`/integral?ids=${ids.value.join()}`).then((res) => {
					if (res.code == 200) {
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
					}
				}).finally(() => {
					query();
				})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
	}
	//页面大小
	const handleSizeChange = (val) => {
		query()
	}
	//当前页码
	const handleCurrentChange = (val) => {
		query()
	}
	onMounted(() => {
		query();
	})
</script>

<style scoped>
</style>